<!--
 * @Description: 附近历史轨迹
 * @Author: Ronda
 * @Date: 2020-06-19 15:59:39
 * @LastEditors: LuoWenyang
 * @LastEditTime: 2021-07-17 20:27:36
-->
<template>
    <div id="map_container">足迹</div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {
     /* global BMapGL */
        /* global Stats */
        /* global mapv */
        /* global mapvgl */
        /* global initMap */
        var map = initMap({
            tilt: 60,
            heading: 0,
            center: [106.560734, 29.566986],
            zoom: 13,
        });

        var view = new mapvgl.View({
            map: map
        });

        view.startAnimation();

        fetch('http://120.53.125.221:8181/uploadimg/car.csv').then(function (rs) {
            return rs.text();
        }).then(function (csvstr) {
            
           // csvstr = (csvstr.split('\n').slice(0, 1).concat(csvstr.split('\n').slice(1, 10))).join('\n');
            var dataSet = mapv.csv.getDataSet(csvstr);
            var data = dataSet.get();

            var linePointLayer = new mapvgl.LinePointLayer({
                size: 5,
                speed: 1,
                color: 'rgba(255, 255, 0, 0.6)',
                animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_UNIFORM_SPEED,
                shapeType: mapvgl.LinePointLayer.SHAPE_TYPE_CIRCLE,
                blend: 'lighter'
            });
            view.addLayer(linePointLayer);
            linePointLayer.setData(data);

            var lineLayer = new mapvgl.SimpleLineLayer({
                color: 'rgba(55, 55, 255, 0.11)'
            });
            view.addLayer(lineLayer);
            lineLayer.setData(data);
        });
  },
};
</script>
<style scoped>
     #map_container {
            width: 100%;
            height: 100vh;
            margin: 0;
        }
</style>